<%@ page import="java.nio.file.Path" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/18/018
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>修改手机头像</title>
    <script src="../statics/js/jquery-1.8.3.js"></script>
    <script src="../statics/js/jquery.min.js"></script>
    <script src="../statics/js-pzz/Images.js"></script>
    <link rel="stylesheet" type="text/css" href="../statics/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../statics/css/page.css" />

</head>
<style type="text/css">
    html,body{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .toBar{
        width: 100%;
        padding: 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }
    .toBar label input{
        display: none;
    }
    .toBar label,.toBar button{
        display: inline-block;
        width: 100px;
        text-align: center;
        padding: 10px 0;
        font-size: 12px;
        color: #fff;
        background: #fc667e;
        border-radius: 6px;
        cursor: pointer;
    }
    .toBar button{
        border: none;
        float: right;
    }
    .img_content,canvas{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    canvas{
        border: 1px solid #333;
    }
</style>
<body>
<div class="headertwo clearfloat" id="header" style="height:3%;">
    <a href="javascript:history.go(-1)" class="fl box-s"><i class="iconfont icon-arrow-l fl" style="font-size: 1.5rem;"></i></a>
    <p class="fl" style="font-size: 1.5rem;">修改头像</p>
</div>
<div class="toBar" style="margin-top: 5rem">
    <form action="<%=path%>/user/updateImg" method="post" enctype="multipart/form-data">
        <input type="hidden" value="${user.users_id}" name="users_id"/>
        <label id="UpdImg">
            选择图片
            <input type="file" id="imger" name="imger" value="${user.image}"/>
        </label>
        <button type="submit" id="ok">使用</button>
    </form>
</div>
<div class="img_content" style="margin-top: 3rem;">
    <img src="../statics/fileUplodaImage/${user.image}" style="height: 400px;width: 400px"/>
</div>
<!--裁剪图片框。宽高为定义裁剪出的图片大小-->
<canvas width="400" height="400" style="margin-top: 3rem"></canvas>
<script src="../jsp/js/img.js"></script>
<script src="../jsp/js/require.js"></script>
<script src="../jsp/js/main.js"></script>
<script>
    window.addEventListener("load",function(){
        var $input = document.querySelector("input");
        var $img = document.querySelector("img");
        var $canvas = document.querySelector("canvas");
        //选择图片
        $input.addEventListener("change",function(){
            $img.src = getFileUrl(this);
        },false);



        var myCrop;
        require(["jquery", 'hammer', 'tomPlugin', "tomLib", 'hammer.fake', 'hammer.showtouch'], function($, hammer, plugin, T) {
            document.addEventListener("touchmove", function(e) {
                e.preventDefault();
            });
            var opts = {
                    cropWidth: $canvas.width,
                    cropHeight: $canvas.height
                },
                previewStyle = {
                    x: 0,
                    y: 0,
                    scale: 1,
                    rotate: 0,
                    ratio: 1
                },
                transform = T.prefixStyle("transform"),
                myCrop = T.cropImage({
                    bindFile: $("input"),
                    enableRatio: false, //是否启用高清,高清得到的图片会比较大
                    canvas: $canvas, //放一个canvas对象
                    cropWidth: opts.cropWidth, //剪切大小
                    cropHeight: opts.cropHeight,
                    bindPreview: $("img"), //绑定一个预览的img标签
                    useHammer: true, //是否使用hammer手势，否的话将不支持缩放
                    oninit: function() {

                    },
                    onLoad: function(data) {
                        //用户每次选择图片后执行回调
                        resetUserOpts();
                        previewStyle.ratio = data.ratio;
                        $("img").attr("src", data.originSrc).css({
                            width: data.width,
                            height: data.height
                        }).css(transform, 'scale(' + 1 / previewStyle.ratio + ')');
                        myCrop.setCropStyle(previewStyle)
                    }
                });

            function resetUserOpts() {
                $("canvas").hammer('reset');
                previewStyle = {
                    scale: 1,
                    x: 0,
                    y: 0,
                    rotate: 0
                };
                $("img").attr("src", '');
            };
            $("canvas").hammer({
                gestureCb: function(o) {
                    //每次缩放拖拽的回调
                    $.extend(previewStyle, o);
                    console.log("用户修改图片", previewStyle)
                    $("img").css(transform, "translate3d(" + previewStyle.x + 'px,' + previewStyle.y + "px,0) rotate(" + previewStyle.rotate + "deg) scale(" + (previewStyle.scale / previewStyle.ratio) + ")")
                }
            });

            $("button").on("click", function() {
                myCrop.setCropStyle(previewStyle)
                var src = myCrop.getCropFile({});
                window.location.href = src;
            });
        });


    },false);
</script>

</body>

</html>